<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java"
         pageEncoding="utf-8"
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>书城首页</title>
<%--<link type="text/css" rel="stylesheet" href="static/css/common.css" >--%>
    <%@include file="/pages/common/head.jsp"%><%--静态引用,包括项目起始点,和css,jquery等头部信息 --%>
<%--    <%--%>
<%--        String basepath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";--%>
<%--    %>--%>
    <%--<%=basepath%>--%>
    <%--查看根--%>
    <%--<base href="http://localhost:8080/book/">--%>
</head>
<body>
    <div id="header">
        <img class="logo_img" alt="" src="static/img/logo.gif" >
        <span class="wel_word">网上书城</span>
        <div>
            <%--如果用户还没有登录，显示     【登录 和注册的菜单】 --%>
            <c:if test="${empty sessionScope.user}">
                <a href="<%=basepath%>pages/user/login.jsp">登录</a>
                <a href="<%=basepath%>pages/user/regist.jsp">注册</a> &nbsp;&nbsp;
            </c:if>
            <%--如果已经登录，则显示 登录 成功之后的用户信息。--%>
            <c:if test="${not empty sessionScope.user}">
                <span>欢迎<span class="um_span">${sessionScope.user.username}</span>光临尚硅谷书城</span>
                <a href=<%=basepath+"orderServlet?action=showMyOrders"%>>我的订单</a>
                <a href="<%=basepath%>userServlet?action=logout">注销</a>&nbsp;&nbsp;&nbsp;
            </c:if>

            <a href="<%=basepath%>pages/cart/cart.jsp">购物车</a>
            <a href="<%=basepath%>pages/manager/manager.jsp">后台管理</a>
        </div>
    </div>
    <div id="main">
        <div id="book">
            <div class="book_cond">
                <form action="<%=basepath%>client/bookServlet" method="get">
                    <input  type="hidden" name="action" value="pageByPrice">
                    价格：<input id="min" type="text" name="min" value="${param.min}"> 元 -
                        <input id="max" type="text" name="max" value="${param.max}"> 元
                        <input type="submit" value="查询" />
                </form>
            </div>

            <c:if test="${not empty sessionScope}">
                <c:if test="${empty sessionScope.cart}">
                    <div style="text-align: center">
                        <span id="cartCount">您的购物车中有0件商品</span>
                    </div>
                </c:if>
                <c:if test="${not empty sessionScope.cart}">
                    <c:if test="${empty sessionScope.cart.items}">
                        <div style="text-align: center">
                            <span id="cartCount">您的购物车中有${sessionScope.cart.totalCount}件商品</span>
                        </div>
                    </c:if>
                    <c:if test="${not empty sessionScope.cart.items}">
                        <div style="text-align: center" >
                            <span id="cartCount">您的购物车中有${sessionScope.cart.totalCount}件商品</span>
                            <div id="welcomeAddCartItem">
                                您刚刚将<span style="color: red" id="cartBookName">${sessionScope.goodsName}</span>加入到了购物车中
                            </div>
                        </div>
                    </c:if>
                </c:if>
            </c:if>
            <c:if test="${empty sessionScope}">
                <div style="text-align: center">
                    <span id="cartCount">购物车中有0个商品</span>
                </div>
                <div id="welcomeAddCartItem" style="text-align:center" >

                </div>
            </c:if>

            <c:forEach items="${requestScope.page.items}" var="book">
                <div class="b_list">
                    <div class="img_div">
                        <img class="book_img" alt="" src="<%=basepath%>${book.imgPath}" />
                    </div>
                    <div class="book_info">
                        <div class="book_name">
                            <span class="sp1">书名:</span>
                            <span class="sp2">${book.name}</span>
                        </div>
                        <div class="book_author">
                            <span class="sp1">作者:</span>
                            <span class="sp2">${book.author}</span>
                        </div>
                        <div class="book_price">
                            <span class="sp1">价格:</span>
                            <span class="sp2">￥${book.price}</span>
                        </div>
                        <div class="book_sales">
                            <span class="sp1">销量:</span>
                            <span class="sp2">${book.sales}</span>
                        </div>
                        <div class="book_amount">
                            <span class="sp1">库存:</span>
                            <span class="sp2">${book.stock}</span>
                        </div>
                        <div class="book_add">
                            <button book_id="${book.id}" goodsName="${book.name}" page_no="${requestScope.page.pageNo}" class="add_cart">加入购物车</button>
                        </div>
                    </div>
                </div>
            </c:forEach>
            <script>
                $(".add_cart").click(function () {//加入购物车
                    //location.href="<%=basepath%>cartServlet?action=addItem&id="+$(this).attr("book_id")+"&pageNo="+$(this).attr("page_no")+"&goodsName="+$(this).attr("goodsName")
                    //注释后,用ajax提交数据,修改数据区
                    var data={"id":$(this).attr("book_id")};
                    $.ajax({
                        type:"post",
                        url:"<%=basepath%>cartServlet?action=ajaxAddItem",
                        data:data,
                        success:function (response,status,xhr) {
                            //console.log(response)
                            var jsonObj=JSON.parse(response);
                            var jsonObj=$.parseJSON( response )
                            //console.log(typeof (jsonObj));
                            //console.log(jsonObj["goodsName"]);//js中的json对象要这样读
                            //jsonObj["count"]
                            $("#cartCount").text("您的购物车中有"+jsonObj["count"]+"件商品");
                            console.log("书名是:"+jsonObj["goodsName"])
                            $("#welcomeAddCartItem").html("您刚刚将<span style=\"color: red\" >"+jsonObj["goodsName"]+"</span>加入到了购物车中")

                        },
                        timeout:10000, //如果超时1000毫秒，就结束
                        error:function (xhr,errorText,errorType) { //错误后的行为
                            console.log("errorText:"+errorText); //error
                            console.log("errorType:"+errorType); //not found
                            console.log("xhr.status:"+xhr.status); //404
                            console.log("xhr.statusText:"+xhr.statusText); //not found
                        },
                        dataType:"text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用 最好一直用text
                    })
                });
            </script>


        </div>

        <div id="page_nav">
            <c:if test="${requestScope.page.pageNo!=1}">
                <a href="<%=basepath%>${requestScope.page.url}&pageNo=1">首页</a>
                <a href="<%=basepath%>${requestScope.page.url}&pageNo=${requestScope.page.pageNo-1}">上一页</a>
            </c:if>

            <c:choose>

                <%--当总页数小于等于5时,显示从1到最多页数--%>
                <c:when test="${requestScope.page.pageTotal<=5}">
                    <c:set var="begin" value="1"></c:set>
                    <c:set var="end" value="${requestScope.page.pageTotal}"></c:set>
                </c:when>
                <c:when test="${requestScope.page.pageTotal>5}">
                    <c:choose>
                        <%--                        1 2 3--%>
                        <c:when test="${requestScope.page.pageNo<=3}">
                            <c:set var="begin" value="1"></c:set>
                            <c:set var="end" value="5"></c:set>
                        </c:when>
                        <%--                        8 9 10--%>
                        <c:when test="${requestScope.page.pageNo >= requestScope.page.pageTotal-2}">
                            <c:set var="begin" value="${requestScope.page.pageTotal-4}"></c:set>
                            <c:set var="end" value="${requestScope.page.pageTotal}"></c:set>
                        </c:when>
                        <%--                        4 5 6 7--%>
                        <c:otherwise>
                            <c:set var="begin" value="${requestScope.page.pageNo-2}"></c:set>
                            <c:set var="end" value="${requestScope.page.pageNo+2}"></c:set>
                        </c:otherwise>
                    </c:choose>
                </c:when>
            </c:choose>
            <c:forEach begin="${begin}" end="${end}" var="i">
                <c:if test="${requestScope.page.pageNo==i}">
                    [${i}]
                </c:if>
                <c:if test="${requestScope.page.pageNo!=i}">
                    <a href="<%=basepath%>${requestScope.page.url}&pageNo=${i}">${i}</a>
                </c:if>
            </c:forEach>
            <c:if test="${requestScope.page.pageNo!=requestScope.page.pageTotal}">
                <a href="<%=basepath%>${requestScope.page.url}&pageNo=${requestScope.page.pageNo+1}">下一页</a>
                <a href="<%=basepath%>${requestScope.page.url}&pageNo=${requestScope.page.pageTotal}">末页</a>
            </c:if>
            共${requestScope.page.pageTotal}页，
            ${requestScope.page.pageTotalCount}条记录
            到第<input value="${requestScope.page.pageNo}" name="pn" id="pn_input"/>页
            <input type="button" value="确定" id="searchPageBtn">
            <script>
                $('#searchPageBtn').click(function(){
                    var pageNo=$("#pn_input").val();
                    //javascript 提供一个location 地址栏对象,可读可写
                    if(pageNo<1){//这是为了防止用户输入量过大
                        location.href="<%=basepath%>${requestScope.page.url}&pageNo="+1;
                    }else if(pageNo>${requestScope.page.pageTotal}){
                        location.href="<%=basepath%>${requestScope.page.url}&pageNo="+${requestScope.page.pageTotal};
                    }else{
                        location.href="<%=basepath%>${requestScope.page.url}&pageNo="+pageNo;
                    }
                });
            </script>
        </div>

    </div>

    <%--        <div id="bottom">--%>
    <%--            <span>--%>
    <%--                尚硅谷书城.Copyright &copy;2015--%>
    <%--            </span>--%>
    <%--        </div>--%>
    <%@include file="/pages/common/foot.jsp"%><%--静态引用,公共底部--%>
</body>
</html>